<template>
  <!-- 电商平台维权 -->
  <div>
    <div class="contnetTop_box" :style="{
      background: `url(${getAssetsImages('flfw-bg')}) no-repeat`,
      'background-size': '100% 100%',
    }">
      <div class="Mian">
        <div class="contnetTop padlr320">
          <packageModule />
          <div class="consultation-box">
            <el-image style="width: 400px; height: 400px" :src="getAssetsImages('flfw-bg1')"></el-image>
            <el-affix :offset="162">
              <Consultation />
            </el-affix>
          </div>
        </div>
      </div>
    </div>
    <productDescription />
    <serviceProcess />
    <!-- 材料 -->
    <material></material>
    <!-- -->
    <superiority></superiority>
    <DetailsCs></DetailsCs>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from "vue";
import superiority from "@/components/lawyer/superiority.vue";
import DetailsCs from "@/components/lawyer/details.vue";
import Consultation from "@/components/lawyer/consultation.vue";
import material from "@/components/lawyer/material.vue"
import productDescription from "@/components/lawyer/productDescription.vue"
import serviceProcess from "@/components/lawyer/serviceProcess.vue"
import packageModule from "@/components/lawyer/packageModule.vue"
let routeList = ref([
  { title: "服务商城", url: "/home" },
  { title: "案件服务" },
  { title: "电商平台维权" },
]);
const isIndex = ref(0)
const isIndexMeal = ref(0)
const router = useRouter();
const route = useRoute();
const activeName = ref("产品描述");
const productTabs = reactive([
  {
    name: "产品描述",
    // 内容
    content:
      "针对国内(国际)电商平台的店主或其他平台主体、下限侵权主体，品牌被山寨，店铺商品被抄袭、被侵权等，提供一站式维权解决方案。专业维权顾问协助权利人调查搜集证据和资料，快速向电商平台、其他平台、市场监督管理部门或其他主管机关投诉举报，在证据充足的情况72小时内完成维权，要求侵权方停止侵权、赔偿损失等。",
  },
  {
    name: "服务流程",
    content:
      "专利民事诉讼是指当事人涉及的专利合同纠纷、专利权权属纠纷、专利侵权纠纷等专利民事诉讼案件。平台甄选资深专利律师全流程代理案件，确保客户在专利民事诉讼中的合法权利获得最大保障。",
  },
  {
    name: "所需材料",
    content:
      "专利民事诉讼是指当事人涉及的专利合同纠纷、专利权权属纠纷、专利侵权纠纷等专利民事诉讼案件。平台甄选资深专利律师全流程代理案件，确保客户在专利民事诉讼中的合法权利获得最大保障。",
  },
  {
    name: "平台优势",
    content: "Tab 4 content",
  },
]);
const product = reactive([
  { title: "投诉举报" },
  { title: "调解仲裁" },
  { title: "谈判和解" },
  // { title: "债务纠纷" },
  // { title: "知识产权及不正当竞争纠" },
  // { title: "房产纠纷" },
  // { title: "建设工程纠纷" },
  // { title: "婚姻家庭" },
  // { title: "交通事故" },
  // { title: '专利权权属纠纷' },
  // { title: '专利侵权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' },
  // { title: '确认不侵害专利权纠纷' }
]);
const comboMeal = reactive([
  { title: "我是原告" },
  { title: "我是被告(第三人)" },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
  // { title: '我是原告' },
  // { title: '我是被告(第三人)' },
]);
const masking = reactive([
  {
    title: "专属顾问咨询",
    sotr: "01",
  },
  {
    title: "提交维权需求",
    sotr: "02",
  },
  {
    title: "签订委托协议",
    sotr: "03",
  },
  {
    title: "维权方案评估",
    sotr: "04",
  },
  {
    title: "准备投诉材料",
    sotr: "05",
  },
  {
    title: "线上线下投诉",
    sotr: "06",
  },
  {
    title: "跟进受理进展",
    sotr: "07",
  },
  {
    title: "反馈处理结果",
    sotr: "08",
  },
  {
    title: "反馈处理结果",
    sotr: "09",
  },
  {
    title: "反馈处理结果",
    sotr: "10",
  },
  {
    title: "反馈处理结果",
    sotr: "11",
  },
  {
    title: "反馈处理结果",
    sotr: "12",
  },
]);
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
const selectIndex = (index) => {
  isIndex.value = index;
};
const comboMealIndex = (index) => {
  isIndexMeal.value = index;
};
</script>

<style lang="scss" scoped>
.Mian {
  width: 1920px !important;
  margin: 0 auto;
  // height: 100%;
}

.contnetTop {
  // overflow: hidden;
  display: flex;
  justify-content: space-between;

  .router {
    display: flex;
    margin-top: 10px;

    .title {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #575966;
    }

    .route {
      display: flex;
      align-items: center;

      .icon-right {
        width: 10px;
        height: 10px;
        margin: 0 10px;
      }
    }

    &-next {
      padding: 0 12px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .bor {
        width: 6px;
        height: 6px;
        background: #0052d9;
        border-radius: 3px;
        margin-right: 10px;
      }
    }

    &-view {
      padding: 0 12px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .border {
        width: 1px;
        height: 10px;
        background: #d8d8d8;
        margin: 0 12px;
      }

      .title {
        margin-left: 10px;
      }

      .back {
        width: 14px;
        height: 14px;
      }
    }
  }

  .contnetTop-title {
    width: 288px;
    height: 50px;
    font-size: 36px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #202020;
    line-height: 50px;
    margin-top: 30px;
  }

  .contnetTop-text {
    width: 384px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: Regular;
    text-align: left;
    color: #575966;
    line-height: 22px;
    margin-top: 20px;
  }

  .routeList-type {
    display: flex;
    // align-items: center;
    margin-top: 20px;
    // flex-wrap: wrap;

    .type-box {
      // display: flex;
      flex-wrap: wrap;
      flex: 1;
      display: flex;
      // align-items: flex-start;
      // justify-content: flex-start;
      // width: 500px
    }

    .type {
      width: 56px;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #575966;
      line-height: 22px;
      margin: 9px 15px 0 0;
      // justify-self: flex-end;
    }

    .type-item {
      // width: 104px;
      height: 28px;
      background: #ffffff;
      border-radius: 2px;
      margin: 5px 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 5px 10px;
      cursor: pointer;

      span {
        // width: 84px;
        height: 16px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        // color: #181818;
        line-height: 16px;
      }
    }

    .select {
      border: 1px solid #004cd1;
      color: #0052d9;
    }
  }

  .comboMeal-type {
    display: flex;
    // align-items: center;
    margin-top: 20px;

    .type-box {
      flex-wrap: wrap;
      flex: 1;
      display: flex;
    }

    .type {
      width: 56px;
      height: 22px;
      font-size: 14px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: left;
      color: #575966;
      line-height: 22px;
      margin: 9px 15px 0 0;
    }

    .type-item {
      // width: 104px;
      height: 28px;
      background: #ffffff;
      border-radius: 2px;
      margin: 5px 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5px 10px;
      cursor: pointer;

      span {
        // width: 84px;
        height: 16px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        // color: #181818;
        line-height: 16px;
      }
    }

    .select {
      border: 1px solid #004cd1;
      color: #0052d9;
    }
  }

  .price-box {
    .price {
      margin-top: 20px;

      :nth-child(1) {
        width: 91px;
        height: 32px;
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
        color: #ff4d00;
        line-height: 32px;
      }

      :nth-child(2) {
        width: 28px;
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #181818;
        line-height: 22px;
      }
    }
  }

  .carousel_but {
    margin: 20px 0;
  }

  .consultation-box {
    // position: relative;
    display: flex;
  }

  .consultation {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 40px;
    height: 125px;
    background: linear-gradient(180deg, #ebf3ff, #ffffff);
    border: 1.5px solid #ffffff;
    border-radius: 24px;
    box-shadow: 0px 4px 20px 0px rgba(213, 218, 227, 0.5);
    position: absolute;
    right: -70px;
    top: 70px;

    .el-icon {
      font-weight: bold;
    }

    span {
      width: 16px;
      height: 84px;
      font-size: 16px;
      font-family: PingFang TC, PingFang TC-Regular;
      font-weight: bold;
      text-align: left;
      color: #202020;
      line-height: 21px;
    }
  }
}

.demo-tabs {
  :deep(.el-tabs__item.is-active) {
    color: #004cd1 !important;
  }

  :deep(.el-tabs__active-bar) {
    height: 6px;
    background-color: #004cd1;
  }

  :deep(.el-tabs__item) {
    height: 64px;
  }

  .product-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .product-title {
      width: 112px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
      margin: 50px 0 20px 0;
    }

    .product-content {
      width: 1280px;
      height: 56px;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: Regular;
      text-align: center;
      color: #202020;
      line-height: 28px;
      margin-bottom: 60px;
    }
  }
}

.servicepro-main {

  // display: flex;
  // justify-content: center;
  // // align-items: center;
  // flex-direction: column;
  .masking-right {
    // margin-left:
    width: 60px;
    text-align: center;
  }

  .masking_title_box {
    // width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .masking_title {
      // width: 100%;

      // align-items: center;
      // margin: 0 auto;
      margin: 30px 0 20px 0;
      // width: 112px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
    }
  }

  .masking_title_content_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .masking_title_content {
    display: flex;
    align-items: center;
    // fle
    margin: 10px 0;

    .masking-left {
      width: 260px;
      height: 158px;
      background: linear-gradient(180deg, #f0f3f7, #ffffff);
      border: 2px solid #ffffff;
      border-radius: 4px;
      box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: flex-start;

      // justify-content: center;
      padding: 20px 15px;

      .masking-left-num {
        width: 29px;
        height: 32px;
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: center;
        color: #0052d9;
        line-height: 32px;
      }

      .masking-left-box {
        margin-left: 10px;

        .masking-left-title {
          width: 80px;
          height: 32px;
          font-size: 20px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: Semibold;
          text-align: center;
          color: #181818;
          line-height: 32px;
        }

        .masking-left-text {
          // width: 195px;
          height: 88px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: left;
          color: #646770;
          line-height: 22px;
          display: flex;
          flex-direction: column;
          margin-top: 10px;
        }
      }
    }
  }
}

.servicepro-main {

  // display: flex;
  // justify-content: center;
  // // align-items: center;
  // flex-direction: column;
  .masking_title_box {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    .masking_title {
      // width: 100%;

      // align-items: center;
      // margin: 0 auto;
      margin: 30px 0 20px 0;
      // width: 112px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
    }
  }

  .masking_box {
    .servicepro {
      display: flex;
      justify-content: center;
      // height: 100%;
      align-items: center;
      // margin-top: 30px;
      position: relative;

      .row-line {
        position: absolute;
        height: 1px;
        background: #d3d8e3;
        width: 60%;
        left: 50%;
        top: 60%;
        z-index: 1;
        transform: translate(-50%, -50%);
      }

      .top2 {
        margin-top: 90px;
      }

      .masking-sort {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        .masking-sort-name {
          z-index: 2;
          width: 110px;
          height: 24px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: Semibold;
          text-align: center;
          color: #181818;
          line-height: 24px;
        }

        .masking-sort-line {
          z-index: 2;
          width: 56px;
          height: 56px;
          background: linear-gradient(180deg, #f0f3f7, #ffffff);
          border: 2px solid #ffffff;
          border-radius: 50%;
          box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
          display: flex;
          justify-content: center;
          align-items: center;

          .sort-li {
            width: 27px;
            height: 40px;
            font-size: 24px;
            font-family: San Francisco Display, San Francisco Display-Bold;
            font-weight: Bold;
            text-align: center;
            color: #0052d9;
            line-height: 40px;
            letter-spacing: 1.33px;
          }
        }
      }
    }
  }
}
</style>
